<template>
  <div>
    <el-card class="box-card">
      <div class="button">
        <el-button type="primary" @click="Popup">添加分类</el-button>
      </div>
      <div class="table">
        <tree-table
          ref="table"
          :data="list"
          :selection-type="false"
          :columns="columns"
          :show-row-hover="false"
          :expand-type="false"
          show-index
          border
        >
          <!-- 是否有效 -->
          <template slot="likes" scope="scope">
            <div>
              <i
                v-if="!scope.row.cat_deleted"
                style="color: #39ce39; font-size: 16px"
                class="el-icon-circle-check"
              ></i>
              <i v-else class="el-icon-circle-check"></i>
            </div>
          </template>
          <!-- 排序 -->
          <template slot="isrt" scope="scope">
            <div>
              <el-tag :type="items[scope.row.cat_level]">{{
                (scope.row.cat_level + "") | jurisdiction
              }}</el-tag>
            </div>
          </template>
          <!-- 操作 -->
          <template slot="isort" scope="scope">
            <div>
              <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="edit(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="remove(scope.row)"
              >
                删除
              </el-button>
            </div>
          </template>
        </tree-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="paging.pagenum"
          :page-sizes="[2, 5, 10, 20]"
          :page-size="paging.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(this.total)"
        >
        </el-pagination>
        <!-- 添加分类弹框 -->
        <el-dialog
          title="添加商品分类"
          :visible.sync="dialogVisible"
          width="50%"
        >
          <span>
            <el-form
              :rules="rules"
              :model="addition"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="分类名称" prop="name">
                <el-input v-model="addition.cat_name"></el-input>
              </el-form-item>
            </el-form>
            <div class="block">
              <span class="demonstration">父级分类</span>
              <el-cascader
                clearable
                @change="change"
                ref="refok"
                v-model="value"
                :options="showlist"
                :props="show"
              ></el-cascader>
            </div>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="onconfirm">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 编辑弹框 -->
        <el-dialog title="提示" :visible.sync="EditdialogVisible" width="30%">
          <span>
            <el-form
              :model="ruleForm"
              :rules="ruless"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="分类名称" prop="name">
                <el-input v-model="ruleForm.cat_name"></el-input>
              </el-form-item>
            </el-form>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="EditdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="ConfirmEdit">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
import {
  GoodsCategory,
  GoodsClassify,
  DeleteClassify,
  EditSubmit,
  ConfirmClassify,
} from "../../http/api";

export default {
  data() {
    return {
      list: [],
      paging: {
        type: "",
        pagenum: 1,
        pagesize: 5,
      },
      total: "",
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          prop: "cat_deleted",
          type: "template",
          template: "likes",
        },
        {
          label: "排序",
          prop: "cat_level",
          type: "template",
          template: "isrt",
        },
        {
          label: "操作",
          type: "template",
          template: "isort",
        },
      ],
      items: ["", "success", "warning"],
      dialogVisible: false,
      from: {
        name: "",
      },
      rules: {
        name: [
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      ruless: {
        name: [
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
      addition: {
        cat_name: "",
        cat_pid: 0,
        cat_level: 0,
      },
      value: [],
      showlist: [],
      show: {
        label: "cat_name",
        value: "cat_id",
        children: "children",
        expandTrigger: "hover",
      },
      EditdialogVisible: false,
      ruleForm: {
        cat_name: "",
      },
      refs: {},
      array: [],
    };
  },
  created() {
    this.goodslist();
  },
  methods: {
    async goodslist() {
      //商品列表接口
      const res = await GoodsCategory(this.paging);
      // console.log(res);
      this.list = res.result;
      this.total = res.total;
      // console.log(this.list);
    },
    //获取三级联动数据id
    change() {
      // console.log(this.$refs.refok);
      this.array = this.$refs.refok.checkedValue;

      if (this.array.length > 0) {
        this.addition.cat_pid = this.array[this.array.length - 1];
        this.addition.cat_level = this.array.length;
      } else {
        this.addition.cat_pid = 0;
        this.addition.cat_leve = 0;
      }
      console.log(this.addition.cat_level);
      // this.addition = this.$refs.refok.checkedValue;
    },
    // 添加
    Popup() {
      this.dialogVisible = true;
      let paging = {
        type: 2,
      };
      GoodsClassify(paging).then((res) => {
        console.log(res);
        this.showlist = res;
      });
      this.goodslist();
    },
    // 确认要添加
    async onconfirm() {
      console.log(this.addition);
      const res = await ConfirmClassify(this.addition);
      console.log(res);
      this.goodslist();
      this.dialogVisible = false;
      this.$message({
        message: "添加成功",
        type: "success",
      });
    },
    // 编辑
    edit(row) {
      // console.log(row);
      this.cat_id = row.cat_id;
      // console.log(this.cat_id);
      this.ruleForm = row;
      this.EditdialogVisible = true;
    },
    async ConfirmEdit() {
      const res = await EditSubmit(this.cat_id, this.ruleForm);
      console.log(res);
      this.goodslist();
      this.EditdialogVisible = false;
      this.$message({
        message: "更新商品分类成功",
        type: "success",
      });
    },
    // 删除
    async remove(row) {
      console.log(row);
      const goodID = row.cat_id;
      console.log(goodID);
      const res = await DeleteClassify(goodID);
      console.log(res);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.goodslist();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleSizeChange(val) {
      this.paging.pagesize = val;
      this.goodslist();
    },
    handleCurrentChange(val) {
      this.paging.pagenum = val;
      this.goodslist();
    },
  },
};
</script>

<style lang="scss" scoped>
.button {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
.table {
  margin-top: 10px;
}
.block {
  width: 100%;
}
.el-cascader {
  width: 86.5%;
  margin-left: 10px;
}
.demonstration {
  margin-left: 30px;
}
</style>